{% load i18n %}
<div class="alert-setting-form">
    <form action="" class="layui-form" lay-filter="alertSettingForm">
        {% csrf_token %}
        {#        <div class="layui-row layui-col-space15 layui-hide">#}
        {#            <div class="layui-col-md12">#}
        {#                <div class="layui-card">#}
        {#                    <div class="layui-card-header"><i class="fa fa-bell-o"></i><span#}
        {#                            style="padding-left: 5px">{% trans 'alertSettingPage_label_attendanceAlertSetting' %}</span>#}
        {#                    </div>#}
        {#                    <div class="layui-card-body" style="margin: 10px">#}
        {#                        <div class="layui-form-item">#}
        {#                            <div class="layui-inline">#}
        {#                                <label for="id_late_exceed"#}
        {#                                       class="layui-form-label">{% trans 'alertSettingPage_label_lateExceed' %}<span#}
        {#                                        class="required">*</span></label>#}
        {#                                <div class="layui-input-inline">#}
        {#                                    <input type="text" id="id_late_exceed" name="late_exceed" value="0"#}
        {#                                           autocomplete="off" placeholder="" lay-verify="required" class="layui-input">#}
        {#                                </div>#}
        {#                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_exceedUnit_times' %}</div>#}
        {#                            </div>#}
        {#                        </div>#}
        {#                        <div class="layui-form-item">#}
        {#                            <div class="layui-inline">#}
        {#                                <label for="id_early_leave_exceed"#}
        {#                                       class="layui-form-label">{% trans 'alertSettingPage_label_earlyLeaveExceed' %}<span#}
        {#                                        class="required">*</span></label>#}
        {#                                <div class="layui-input-inline">#}
        {#                                    <input type="text" id="id_early_leave_exceed" name="early_leave_exceed" value="0"#}
        {#                                           autocomplete="off" placeholder="" lay-verify="required" class="layui-input">#}
        {#                                </div>#}
        {#                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_exceedUnit_times' %}</div>#}
        {#                            </div>#}
        {#                        </div>#}
        {#                        <div class="layui-form-item">#}
        {#                            <div class="layui-inline">#}
        {#                                <label for="id_absent_exceed"#}
        {#                                       class="layui-form-label">{% trans 'alertSettingPage_label_absentExceed' %}<span#}
        {#                                        class="required">*</span></label>#}
        {#                                <div class="layui-input-inline">#}
        {#                                    <input type="text" id="id_absent_exceed" name="absent_exceed" value="0"#}
        {#                                           autocomplete="off" placeholder="" lay-verify="required" class="layui-input">#}
        {#                                </div>#}
        {#                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_exceedUnit_times' %}</div>#}
        {#                            </div>#}
        {#                        </div>#}
        {#                        <div class="layui-form-item">#}
        {#                            <div class="layui-inline">#}
        {#                                <div class="layui-input-inline layui-hide" style="width: 30px"#}
        {#                                     title="{% trans 'sending_alert' %}">#}
        {#                                    <input type="checkbox" name="exception_alert" lay-skin="primary" title="">#}
        {#                                </div>#}
        {#                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_label_emailSendingFrequency' %}<span#}
        {#                                        class="required">*</span></div>#}
        {#                                <div class="layui-input-inline">#}
        {#                                    <select name="email_frequency" id="id_email_frequency" class="layui-input"#}
        {#                                            lay-filter="emailFrequency">#}
        {#                                        <option value="0">{% trans 'frequency_option_none' %}</option>#}
        {#                                        <option value="3">{% trans 'frequency_option_daily' %}</option>#}
        {#                                        <option value="2">{% trans 'frequency_option_weekly' %}</option>#}
        {#                                        <option value="1">{% trans 'frequency_option_monthly' %}</option>#}
        {#                                    </select>#}
        {#                                </div>#}
        {#                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_label_emailSendingDay' %}<span#}
        {#                                        class="required">*</span></div>#}
        {#                                <div class="layui-input-inline">#}
        {#                                    <select name="email_day" id="id_email_day" class="layui-input"></select>#}
        {#                                </div>#}
        {#                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_label_emailSendingTime' %}<span#}
        {#                                        class="required">*</span></div>#}
        {#                                <div class="layui-input-inline">#}
        {#                                    <input type="text" id="id_email_time" name="email_time" autocomplete="off"#}
        {#                                           placeholder="" lay-verify="required" class="layui-input">#}
        {#                                </div>#}
        {#                                <div class="layui-form-mid layui-word-aux">{% trans 'alertSettingPage_label_sendingDay' %}<span#}
        {#                                        class="required">*</span></div>#}
        {#                                <div class="layui-input-inline">#}
        {#                                    <select name="sending_day" id="id_sending_day">#}
        {#                                        <option value="0">{% trans 'alertSettingPage_sendingDayOpts_currentDay' %}</option>#}
        {#                                        <option value="-1">{% trans 'alertSettingPage_sendingDayOpts_nextDay' %}</option>#}
        {#                                    </select>#}
        {#                                </div>#}
        {#                            </div>#}
        {#                        </div>#}
        {#                    </div>#}
        {#                </div>#}
        {#            </div>#}
        {#        </div>#}
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="height: 100px">
                    <div class="layui-card-header"><i class="fa fa-bell-o"></i><span
                            style="padding-left: 5px">{% trans 'alertSettingPage_label_approveAlertSetting' %}</span>
                    </div>
                    <div class="layui-card-body" style="margin: 10px">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="email_alert" lay-skin="primary"
                                           title="{% trans 'alertSettingPage_approveAlertOpts_emailAlert' %}">
                                </div>
                                <div class="layui-input-inline layui-hide">
                                    <input type="checkbox" name="pop_alert" lay-skin="primary"
                                           title="{% trans 'alertSettingPage_approveAlertOpts_popAlert' %}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-card" style="height: 100px">
                    <div class="layui-card-header"><i class="fa fa-check-square-o"></i><span
                            style="padding-left: 5px">{% trans 'alertSettingPage_autoApprove' %}</span>
                    </div>
                    <div class="layui-card-body" style="margin: 10px">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="leave_auto_approve" lay-skin="primary"
                                           title="{% trans 'menu_att_leave' %}">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="manuallog_auto_approve" lay-skin="primary"
                                           title="{% trans 'menu_att_manualLog' %}">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="overtime_auto_approve" lay-skin="primary"
                                           title="{% trans 'menu_att_overtime' %}">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="training_auto_approve" lay-skin="primary"
                                           title="{% trans 'menu_att_training' %}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit=""
                        lay-filter="alertSubmit">{% trans 'alertSettingPage_btn_submit' %}</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layer', 'laydate'], function () {
        var form = layui.form, layer = layui.layer, laydate = layui.laydate;
        laydate.render({
            elem: '#id_email_time'
            , type: 'time'
            , value: '00:00:00'
        });
        form.render();

        function dayChange(f, d) {
            switch (f) {
                case '1':   //Monthly
                    var options = '';
                    for (var i = 1; i < 32; i++) {
                        options += '<option value="' + i + '">' + i + '</option>';
                    }
                    $("#id_email_day").html(options);
                    form.render('select');
                    $("#id_email_day").val(d);
                    break;
                case '2':   //Weekly
                    var options = ''
                        + '<option value="' + 0 + '">' + gettext('monday') + '</option>'
                        + '<option value="' + 1 + '">' + gettext('tuesday') + '</option>'
                        + '<option value="' + 2 + '">' + gettext('wednesday') + '</option>'
                        + '<option value="' + 3 + '">' + gettext('thursday') + '</option>'
                        + '<option value="' + 4 + '">' + gettext('friday') + '</option>'
                        + '<option value="' + 5 + '">' + gettext('saturday') + '</option>'
                        + '<option value="' + 6 + '">' + gettext('sunday') + '</option>';
                    $("#id_email_day").html(options);
                    $("#id_email_day").val(d);
                    form.render('select');
                    break;
                case '3':   //Daily
                    var options = '<option value="' + 1 + '">' + 1 + '</option>';
                    $("#id_email_day").html(options);
                    $("#id_email_day").val(1);
                    form.render('select');
                    break;
                default:
                    break;
            }
        }

        $.ajax({
            url: "/base/api/systemSetting/?name=alert_setting"
            , type: "GET"
            , dataType: "json"
            , success: function (response, xhr) {
                var val = response.data[0];
                if (val) {
                    var formVal = JSON.parse(val.value);
                    dayChange(formVal.email_frequency, formVal.email_day);
                    form.val('alertSettingForm', formVal);
                } else {
                    dayChange('1', 1);
                }
            }
            , error: function (xhr, error, e) {

            }
        });
        form.on('select(emailFrequency)', function (data) {
            dayChange(data.value, 1);
        });
        form.on('submit(alertSubmit)', function (data) {
            var csrf = data.field['csrfmiddlewaretoken'];
            var value = {
                late_exceed: data.field['late_exceed']
                , early_leave_exceed: data.field['early_leave_exceed']
                , absent_exceed: data.field['absent_exceed']
                , exception_alert: data.field['exception_alert']
                , email_frequency: data.field['email_frequency']
                , email_day: data.field['email_day']
                , email_time: data.field['email_time']
                , email_alert: data.field['email_alert']
                , pop_alert: data.field['pop_alert']
                , sending_day: data.field['sending_day']
                , leave_auto_approve: data.field['leave_auto_approve']
                , manuallog_auto_approve: data.field['manuallog_auto_approve']
                , overtime_auto_approve: data.field['overtime_auto_approve']
                , training_auto_approve: data.field['training_auto_approve']
            };
            var loadIndex = layer.load();
            $.ajax({
                url: "/base/api/systemSetting/"
                , type: "POST"
                , data: {'name': 'alert_setting', value: JSON.stringify(value), csrfmiddlewaretoken: csrf}
                , dataType: "json"
                , success: function (response, xhr) {
                    layer.close(loadIndex);
                    layer.msg(gettext('save_successful'), {icon: 6});
                }
                , error: function (xhr, error, e) {
                    layer.close(loadIndex);
                    if (xhr.responseJSON.value) {
                        layer.msg(gettext(xhr.responseJSON.value[0]), {icon: 5});
                    } else {
                        layer.msg(gettext('save_filed'), {icon: 5});
                    }
                }
            });
            return false
        });
    })
</script>